<template>
  <div class="confirm-pin-wrapper">
    <div class="confirm-pin-window">
      <div class="close-item">
        <span class="icon-close" @click="closecCheckpwd"></span>
      </div>
      <div class="fontsize40 confirm-pin-title">请输入核销密码</div>
      <div class="input-group-module-wrapper">
        <inputBoxGroup class="input-group-module" :count="digit" :password="password"></inputBoxGroup>
      </div>
      <div class="confirm-result-wrapper">
        <div v-if="confirmError" class="confirm-result-error fontsize24">
          核销密码错误
        </div>
      </div>
    </div>
    <div class="check-password">
      <keyboard @inputkey="handleInput"></keyboard>
    </div>
  </div>
</template>
<style>
/* 销码页面包裹层 */
.confirm-pin-wrapper {
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  align-items: center;
}
/* 确认框组件 */
.confirm-pin-window {
  margin-bottom: 137px;
  width: 640px;
  padding: 20px;
  background: #ffffff;
}
/* 关闭条 */
.close-item {
  color: #999999;
  display: -webkit-flex;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/* 标题 */
.confirm-pin-title {
  margin-top: 19px;
  height: 56px;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}
/* 输入框组包裹层 */
.input-group-module-wrapper {
  flex: auto;
  margin: 50px 0 30px;
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 输入框组 */
.input-group-module {
  width: 523px !important;
}
/* 确认结果包裹层 */
.confirm-result-wrapper {
  height: 40px;
  margin-bottom: 14px;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 核销错误提示 */
.confirm-result-error {
  width: 210px;
  height: 100%;
  background-color: #ff8383;
  color: #ffffff;
  border-radius: 85px;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 检查密码组件 */
.check-password {
  width: 100%;
  background: #ffffff;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
}
</style>
<script>
import inputBoxGroup from './inputBoxGroup'
import keyboard from './keyboard'
export default {
  components: {
    inputBoxGroup,
    keyboard
  },
  props: {
    confirmError: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      password: [],
      digit: 4
    }
  },
  methods: {
    clearPwd() {
      this.password = []
    },
    // 处理输入
    handleInput(key) {
      if (isNaN(key) && key === '<') {
        this.password.pop()
      } else if (key !== '' && this.password.length < this.digit) {
        this.password.push(key)
      }
      // 到达长度则进行销码
      if (this.password.length === this.digit) {
        let pin = this.password.join('')
        this.$emit('submit', pin)
      }
    },
    // 关闭本模块
    closecCheckpwd() {
      this.clearPwd()
      // 重置销码错误的样式
      this.$emit('update:confirmError', false)
      this.$emit('closepwdcheck')
    }
  }
}
</script>
